<template>
	<view class="content">
		<view class="hader">
			<view class="vipbj">
				<view class="contentitem">
					<view class="title">会员即可观看视频全集</view> 
					<view class="Account">账号 ：{{ emait }}</view>
				</view>
				<image class="icon" src="../../static/images/钻石.png"></image>
			</view>
		</view>
		<view class="main">
			<view :class="item.id == defaultid ? 'product_item default':'product_item'" v-for="(item,index) in product" @tap="changeid(item)" :key="index" >
				<view class="product_text">
					<view class="maintitle">{{ item.name }}</view>
					<view class="subtitle">{{  item.type =='ALL'? '全站所有视频任意查看' : item.collectCount + '集全'}}</view>
				</view>
				<view class="product_money">${{ item.money/100 }}</view>
				<view class="Subscript" v-show="item.recommend">推荐</view>
			</view> 
		</view>
		<view class="classification">
			<view class="block"></view>
			<view class="text">Select payment method</view>	
		</view>
		<view class="pay">
			<view class="pay_item" v-for="(item,index) in payuse">
				<image class="img" :src="item.icon"></image>
				<image class="img2" v-show="item.name == paytype" src="../../static/images/xuanzhong.png"></image>
			</view>
		</view>
		<view class="topay" @tap="topay">立即购买全集</view>
	</view>
</template>

<script>
	import { getrequest, postrequest } from '../../util/api'
	export default { 
		data() {
			return {
				channelNo:'',
				product:[], //产品列表
				payuse:[],   //支付方式
				emait:'', // 电子邮件
				videoIdL:'', // 视频的id
				defaultid:'', //选中产品的id
				paytype:'', // 支付类型
				ispay:false, //防重复点击
				userId:'',
				timer:null, // 支付的定时器
			}
		},
        async onLoad(option) {
			console.log('e',option.videoId)
			this.videoId = option.videoId
			this.channelNo = uni.getStorageSync('channelNo') || ''
			this.emait = uni.getStorageSync('email') || ''
			this.userId = uni.getStorageSync('userId') || ''
			// 请求产品
			await this.getproduct_list()
			// 获取支付方式
			await this.getpayuse()


        },
		// 页面显示时触发
		onShow(){

		},
		// 页面初次渲染完成时触发。
		onReady(){

		},
		// 页面隐藏时触发。
		onHide(){

		},
		// 用户点击分享按钮或右上角菜单分享时触发。
		onShareAppMessage(){

		},
		// 页面卸载时触发。
		onUnload(){
			// 离开页面卸载定时器
			clearInterval(this.timer);
		},
		methods: {
			// 请求产品
			async getproduct_list() {
				let params = {
					channelNo: this.channelNo,
					videoId:this.videoId,
				}
				const res = await getrequest('/api/product/product_list',params)
				console.log('首页展示的列表',res)
				if(res.status == 200){
					this.product = res.data
					// 选中推荐的产品
					this.product.forEach((item)=>{
						if(item.recommend == 1){
							this.defaultid = item.id
						}
					})
				}

			},
			// 改变选中套餐
			changeid(item){
				console.log('产品',item)
				this.defaultid = item.id
			},
			// 请求支付渠道
			async getpayuse() {
				let params = {
					channelNo: this.channelNo,
				}
				const res = await getrequest('/api/product/get_pay_type',params)
				if(res.status ==200){
					res.data.forEach(item => {
						if(item == 'PAYPAL'){
							const obj = {
								value :item,
								icon:require('../../static/images/PAYPAL.png'),
								name:'PAYPAL'
							}
							this.payuse.push(obj)
						}
					});
					this.paytype = this.payuse[0].name
					console.log('首页展示的列表',this.payuse)
				}

			},
			// 点击支付
			async topay(){
				// uni.navigateTo({
				// 	url: '/pages/result/result'
				// });
				// return


				// 防重复点击
				if(this.ispay){
					return
				}
				this.ispay = true
							// 处理一下穿过去的首页链接
				const url = uni.getStorageSync('video_indexhref')
				const htmlIndex = url.indexOf('.html');
				// 如果找到了 .html，则截取之前的部分，否则保持原样
				const newUrl = htmlIndex !== -1 ? url.slice(0, htmlIndex + 5) : url;
				const processedUrl = newUrl + '#/pages/result/result'
				const backcideoUrl = newUrl + '#/pages/play/play?videoId=' + this.videoId 
				uni.setStorageSync('backcideoUrl',backcideoUrl)
				uni.showToast({
					title: '支付请求中...',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000 
				})
				let params = {
					userId:this.userId,
					productId:this.defaultid,
					payType:this.paytype,
					returnUrl:processedUrl,
					channelNo:this.channelNo,
					videoId:this.videoId,
					videoUrl: backcideoUrl,
				}
		        const res = await postrequest('/api/product/createOrder',params)
				console.log('res',res)
				if(res.status == 200){
					this.timer = setTimeout(()=>{
						this.ispay = false
					},3000)
					
					// 跳转
					window.location.href = res.data.payUrl
		
				}
			},
		}
	} 
</script>

<style lang="scss">
	.content{
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background-color: rgba(247, 249, 250, 1);
	
		.hader{
			width: 750rpx;
			height: 400rpx;
			// transform: rotate(90deg);
			overflow:auto;
			background: url(https://img.js.design/assets/img/65416f6752003be94af3d517.png#a7f8316a9c4b941298cfb5a9cbdecedd);
			.vipbj{
				width: 720rpx;
				height: 300rpx;
				background: url('../../static/images/矩形.png') no-repeat;
				background-size: 100% 100%;
				margin: 40rpx 15rpx;
				display: flex;
				.contentitem{
					width: 500rpx;
					height: 300rpx;
					// border: 1px solid black;
					.title{
						width: 470rpx;
						height: 70rpx;
						font-size: 36rpx;
						line-height: 70rpx;
						color: rgba(255, 255, 255, 1);
						margin: 50rpx 0 0 30rpx;
					}
					.Account{
						width: 470rpx;
						height: 70rpx;
						font-size: 30rpx;
						line-height: 70rpx;
						color: rgba(255, 255, 255, 1);
						text-align: left;
						margin: 30rpx 0 0 30rpx;
					}
				}
				.icon{
					width: 200rpx;
					height: 200rpx;
					display: inline-block;
					margin: 25rpx 0 0 1rpx;
				}
			}
		}
		.main{
			width: 750rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			.product_item{
				width: 730rpx;
				height: 200rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				border-radius: 8px;
				background: rgba(255, 255, 255, 1);
				border: 2px solid rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 4px  rgba(166, 166, 166, 0.25);
				display: flex;
				position: relative;
				.product_text{
					width: 480rpx;
					height: 200rpx;
					margin-left: 40rpx;
					// border: 1px solid black;
					.maintitle{
						width: 480rpx;
						height: 50rpx;
						font-size: 36rpx;
						font-weight: 500;
						line-height: 50rpx;
						margin: 40rpx 0 0 0;
						color: rgba(12, 13, 15, 1);
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
					}
					.subtitle{
						width: 480rpx;
						height: 50rpx;
						font-size: 28rpx;
						// font-weight: 500;
						line-height: 50rpx;
						margin: 14rpx 0 0 0;
						color: rgba(173, 173, 179, 1);
					}
				}
				.product_money{
					width: 200rpx;
					height: 200rpx;
					// border: 1px solid black;
					line-height: 200rpx;
					text-align: center;
					font-weight: 600;
					font-size: 20px;
					color: rgba(13, 12, 12, 1);
				}
				.Subscript{
					width: 140rpx;
					height: 46rpx;
					border-radius: 11.14px 0px 11.14px 0px;
					background: linear-gradient(270deg, rgba(96, 58, 245, 1) 0%, rgba(58, 107, 241, 1) 100%);
					position: absolute;
					top: -20rpx;
					left: 0;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 46rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;


				}
			}
			.default{
				border: 2px solid rgba(59, 106, 241, 1);
				box-shadow: 0px 2px 4px  rgba(166, 166, 166, 0.25);
			}	
		}
		// 标题
		.classification{
			width: 750rpx;
			height: 40rpx;
			padding: 50rpx 0 0 0;
			display: flex;
			.block{
				width: 6rpx;
				height: 32rpx;
				background-color: rgba(255, 87, 51, 1);
				margin-left: 20rpx;
			}
			.text{
				// width: 660rpx;
				height: 40rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 30rpx;
				color: rgba(0, 0, 0, 1);
				margin-left: 13rpx;
			}	
		}
		.pay{
			width: 730rpx;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(166, 166, 166, 0.25);
			margin: 0 auto;
			margin-top: 20rpx;
			.pay_item{
				width: 730rpx;
				height: 120rpx;
				display: flex;
				.img{
					width: 250rpx;
					height: 60rpx;
					margin: 30rpx 0 0 50rpx;
				}
				.img2{
					width: 50rpx;
					height: 50rpx;
					margin: 40rpx 0 0 330rpx;
				}
			}
		}
		.topay{
			width: 660rpx;
			height: 100rpx;
			border-radius: 30px;
			background: linear-gradient(90deg, rgba(96, 58, 245, 1) 0%, rgba(76, 107, 250, 1) 53.47%, rgba(58, 107, 241, 1) 100%);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 100rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			margin: 0 auto;
			margin-top: 120rpx;
		}
	}

</style>
